<template>
	<view class="contain">
		<view class="header">
			<view class="title">实名认证</view>
			<view class="sub-title">提升账号安全，保障合法权益</view>
		</view>
		<view class="form">
			<view class="title">使用有效身份证件信息认证</view>
			<view class="name-input-c">
				<view class="key">
					<image src="https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/img/cert/icon-1.png" mode="aspectFill"></image>
					<text>姓名</text>
				</view>
				<input v-model="name" type="text" placeholder="请输入姓名"></input>
			</view>
			
			<view class="name-input-c">
				<view class="key">
					<image src="https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/img/cert/icon-2.png" mode="aspectFill"></image>
					<text>身份证</text>
				</view>
				<input v-model="id_card" type="idcard" placeholder="请输入身份证号码"></input>
			</view>
			<view class="tips">
				为满足相关法律法规政策及相关主管部门的要求，我们需要您提供您的姓名、身份证号码、有关身份证证明材料，以证实您已年满18周岁。
			</view>
		</view>
		<view class="btn" @click="submit">
			
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				name:'',
				id_card:''
			}
		},

		methods: {
			submit(){
				if(this.name == ''){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return;
				}
				if(this.id_card == ''){
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					})
					return;
				}
				this.$http('/authentication', 'POST', {
					id_card: this.id_card,
					name: this.name,
				}).then(res => {
					uni.showToast({
						title: res.data.info,
						icon: 'none'
					})
					if(res.data.info == '实名成功'){
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/center/index'
							})
						},1500)
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/img/cert/bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
	input{
		text-align: right;
	}
	.btn{
		width: 700rpx;
		height: 110rpx;
		margin: 200rpx auto;
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/img/cert/btn.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.header{
		width: 750rpx;
		height: 500rpx;
		position: relative;
		.title{
			font-weight: bold;
			position: absolute;
			bottom: 90rpx;
			left: 50%;
			transform:translate(-50%,-50%);
			font-size: 32rpx;
		}
		.sub-title{
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			transform:translate(-50%,-50%);
			font-size: 28rpx;
		}
	}
	.form{
		padding: 0rpx 50rpx;
		.title{
			font-weight: bold;
			margin-bottom: 25rpx;
		}
		.tips{
			font-size: 24rpx;
			color: gray;
		}
		.name-input-c {
			width: 650rpx;
			height: 104rpx;
			background: #F7F6FB;
			border-radius: 20rpx;
			// line-height: 104rpx;
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;
			.key {
				width: 150rpx;
				padding: 0rpx 10rpx;
				margin-left: 30rpx;
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: bold;
				display: flex;
				align-items: center;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}
			
			input {
				padding: 0rpx 20rpx;
				width: 380rpx;
			}
		}
	}
</style>
